<template>
	<view class="order-detail-page">
		<!-- 导航栏 -->
		<!-- #ifndef MP-WEIXIN -->
		<free-nav-bar textContent="订单详情" isBackShow></free-nav-bar>
		<!-- #endif -->
		<view class="order-detail-wrapper">
			<view class="order-status">
				<view class="order-status__flex" v-if="order.status == 0" >
					<image src="@/static/images/white-clock.svg"></image>
					<view class="order-status-txt">
						<text>待支付</text>
					</view>
				</view>
 				<view class="order-status__flex" v-if="order.status == 10" >
					<image src="@/static/images/logistics-white.svg"></image>
					<view class="order-status-txt">
						<text>待发货</text>
					</view>
				</view>
 				<view class="order-status__flex" v-if="order.status == 20">
					<image src="@/static/images/received-white.svg"></image>
					<view class="order-status-txt">
						<text>已收货</text>
					</view>
				</view>
 				<view class="order-status__flex" v-if="order.status == 40">
					<image src="@/static/images/canceled-white.svg"></image>
					<view class="order-status-txt">
						<text>已取消</text>
					</view>
				</view>
				<view class="order-status__flex" v-if="order.status == 30">
					<image src="@/static/images/received-white.svg"></image>
					<view class="order-status-txt">
						<text>已完成</text>
					</view>
				</view>
			</view>
			<!-- <view class="order-logistics">
				<view class="order-logistics-top">
					<image src="@/static/images/logistics.svg"></image>
					<view class="logistics-txt">[深圳市][南山综合部邮件处理中心]，已发下一在</view>
					<uni-icons type="right" color="#959595" size="33rpx"></uni-icons>
				</view>
				<view class="order-logistics-time">
					2024-8-23 20:20:23
				</view>
			</view> -->
			<view class="order-detail__top">
				<view class="order-detail__top--info flex">
					<view class="user__info flex">
						<text class="main-text-color name">{{order.receiverName}}</text>
						<text class="main-text-color phone">{{order.receiverMobile}}</text>
					</view>
				</view>
				<view class="order-detail__top--address flex">
					<uni-icons type="location" size="43rpx" color="#959595"></uni-icons>
					<text class="address__text main-text-color font28">{{order.receiverDetailAddress}}</text>
					<!-- <uni-icons type="right" color="#959595" size="33rpx"></uni-icons> -->
				</view>
			</view>
			<view class="order-detail__product">
				<view v-for="(item,index) in order.items" :key="item.id">
					<view class="order-detail__shop-name">{{item.orchardName}}</view>
					<ul>
						<li class="flex">
							<view class="flex list-item-content">
								<view class="order-detail__product--img">
									<image :src="item.picUrl"/>
								</view>
								<view class="order-detail__product--info">
									<view class="info-warpper">
										<text class="title main-text-color font28">{{item.spuName}}</text>
										<text class="text__info">规格：{{item.sku}}</text>
									</view>
									<view class="order-detail__product--price flex">
										<text class="price"><text class="rmb">￥</text>{{getYuan(item.payPrice)}}</text>
										<text class="num main-text-color font28">x{{item.count}}</text>
									</view>
								</view>
							</view>
						</li>					
					</ul>
				</view>
<!--				<ul>
					<li class="flex" v-for="(item,index) in order.items" :key="item.id">
						<view class="order-detail__product--img">
							<image style="width: 100%; height: 100%;" :src="item.picUrl"/>
						</view>
						<view class="order-detail__product--info">
							<view class="info-warpper">
								<text class="title main-text-color font28">{{item.spuName}}</text>
								<text class="text__info">规格：{{item.sku}}</text>
							</view>
							<view class="order-detail__product--price flex">
								<text class="price"><span class="symbol">￥</span>{{getYuan(item.payPrice)}}</text>
								<text class="num main-text-color font28">x{{item.count}}</text>
							</view>
						</view>
					</li>					
				</ul> -->
			</view>
			<view class="order-detail__total">
				<view class="flex total">
					<view class="label font28">商品总额</view>
					<view class="val"><text class="symbol">￥</text>{{getYuan(order.totalPrice)}}</view>
				</view>
				<view class="flex freight">
					<view class="label font28">运费</view>
					<view class="val"><text class="symbol">￥</text>{{getYuan(order.deliveryPrice)}}</view>
				</view>
				<view class="flex payment">
					<view class="label font28">
						<text>实付款：</text>
					</view>
					<view class="val"><text class="symbol">￥</text>{{getYuan(order.payPrice)}}</view>					
				</view>
			</view>
			<view class="order-detail__order">
				<view class="order__item flex">
					<view class="label">订单编号</view>
					<view class="val main-text-color">{{order.no}}</view>
				</view>
				<view class="order__item flex" v-if="order.logisticsName && order.logisticsName != ''">
					<view class="label">快递公司</view>
					<view class="val main-text-color">{{order.logisticsName}}</view>
				</view>
				<view class="order__item flex" v-if="order.logisticsNo && order.logisticsNo != ''">
					<view class="label">快递单号</view>
					<view class="val main-text-color">{{order.logisticsNo}}</view>
				</view>
				<view class="order__item flex">
					<view class="label">下单时间</view>
					<view class="val main-text-color">					
						<uni-dateformat :date="order.createTime" :format="'yyyy-MM-dd hh:mm:ss'"></uni-dateformat>
					</view>
				</view>
				<!-- <view class="order__item flex">
					<view class="label">付款时间</view>
					<view class="val main-text-color">
						<uni-dateformat :date="Date.now()" :format="'yyyy-MM-dd hh:mm:ss'"></uni-dateformat>
					</view>
				</view> -->
			</view>
<!-- 			<view class="order-detail__order">
				<view class="order__item flex">
					<view class="label">订单编号</view>
					<view class="val main-text-color">{{order.no}}</view>
				</view>
				<view class="order__item flex" v-if="order.payNo">
					<view class="label">交易流水号</view>
					<view class="val main-text-color">{{order.payNo}}</view>
				</view>
				<view class="order__item flex">
					<view class="label">下单时间</view>
					<view class="val main-text-color">					
						<uni-dateformat :date="order.createTime" :format="'yyyy-MM-dd hh:mm:ss'"></uni-dateformat>
					</view>
				</view>
				<view class="order__item flex" v-if="order.payTime">
					<view class="label">付款时间</view>
					<view class="val main-text-color">
						<uni-dateformat :date="order.payTime" :format="'yyyy-MM-dd hh:mm:ss'"></uni-dateformat>
					</view>
				</view>
			</view> -->
			<view class="order-detail--bottom">
				<view class="order-detail--btns">
					<button class="leftBox" type="default" plain="true" style="border: none;padding: 0rpx;margin: 0rpx;" open-type="contact" @contact="contact">
						<view class="btn border-999">						
							<text>联系客服</text>						
						</view>
					</button>
					<view class="btn border-999" v-if="order.status == 0" @click="cancelOrder(order.id)">取消订单</view>
					<view class="btn border-C38A8A" v-if="order.status == 0" @click="callPay(order.payOrderId)">立即支付</view>
					
				</view>
<!-- 				<view class="order-detail--btns">
					<view class="btn border-999">联系客服</view>
					<view class="btn border-999">申请退款</view>
				</view>
				<view class="order-detail--btns">
					<view class="btn border-999">联系客服</view>
					<view class="btn border-999">申请售后</view>
					<view class="btn border-C38A8A">再次购买</view>
				</view>
				<view class="order-detail--btns">
					<view class="btn border-999">删除订单</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import $U from '@/common/free-lib/util.js';
	import $D from '@/common/free-lib/time.js';
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	export default {
		components: {
			freeNavBar
		},
		onLoad(e){
			console.log(e)
			if(e) {
				if(e.id && e.id > 0) {
					this.getOrderDetail(e.id);
				}
				else if(e.orderItemId && e.orderItemId > 0) {
					this.getOrderItemDetail(e.orderItemId);
				}
			}			
		},
		data() {
			return {
				order: {}
			}
		},
		created() {
			
		},
		methods: {
			getYuan(price) {
				return $U.fenToYuan(price);
			},
			parseTime(time) {
				let date = new Date(time)
				return $D.dateFormat(date,'Y-MM-DD hh:tt:ss');
			},
			getOrderItemDetail(orderItemId) {
				let _this = this;
				$H.get('/trade/order/get-item-detail',{id: orderItemId}).then(res => {
					if(res) {
						_this.order = res;
					}
				})
			},
			getOrderDetail(id) {
				let _this = this;
				$H.get('/trade/order/get-detail',{id}).then(res => {
					if(res) {
						_this.order = res;
					}
				})
			},
			cancelOrder(id) {
				let _this = this;
				$H.post('/trade/order/cancel',{id}).then(res => {
					if(res) {
						_this.getOrderDetail(id);
					}
				})
			},
			callPay(payOrderId) {
				let openid = $U.getOpenId();
				let payPrice = this.getYuan(this.order.payPrice)
				if(openid) {
					let extras = {openid}
					let orderId = this.order.id
					uni.showLoading({title: '加载中，请稍后'});
					$H.post('/pay/order/submit', {id: payOrderId, channelCode: 'wx_lite', channelExtras: extras}).then(res => {
					 	if(res && res.status == 0) {
							uni.hideLoading();
					 		let payData = JSON.parse(res.displayContent);
					 		uni.requestPayment({
					 			provider: 'wxpay',
					 			timeStamp: payData.timeStamp,
					 			nonceStr: payData.nonceStr,
					 			package: payData.packageValue,
					 			signType: payData.signType,
					 			paySign: payData.paySign,
					 			success: function (res) {
									uni.navigateTo({url: `/pages/common/payment-success?orderId=${orderId}`})
					 			},
					 			fail: function (err) {
					 				uni.showToast({
					 					title: '支付失败，请联系客服处理',
					 					icon: 'none'
					 				});
					 			}
					 		});
					 	} else {
							uni.hideLoading();
							uni.showToast({
								title: '提交订单失败，请稍后再试',
								icon: 'none'
							});
						}
					})
				 }
				 else {
					  let url = '/pages/tabbar/find/find';
					  uni.navigateTo({url: '/pages/common/login/login?from=' + url})
				 }
			},
			contact () {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail-page {
		padding-bottom: calc(env(safe-area-inset-bottom) + 130rpx);
		.order-status {
			width: 100%;
			padding: 20rpx 0;
			background-color: #FD4E4E;
			.order-status__flex {
				display: flex;
				justify-content: center;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
			.order-status-txt {
				font-size: 31rpx;
				font-weight: 500;
				line-height: 40rpx;
				margin-left: 5px;
				color: #fff;
			}
		}
		.order-logistics {
			width: 100%;
			padding: 30rpx 0;
			background-color: #fff;
			border-bottom: 1px solid #F7F7F7;
			.order-logistics-top {
				width: calc(100% - 49rpx);
				margin-left: 30rpx;
				display: flex;
				image {
					width: 37rpx;
					height: 37rpx;
				}
				.logistics-txt {
					width: calc(100% - 105rpx);
					margin: 0 12rpx;
					font-size: 26rpx;
					color: #222;
					white-space:nowrap;        // 强制一行显示
					overflow:hidden;          // 超出隐藏
					text-overflow:ellipsis;   // 省略号
				}
			}
			.order-logistics-time {
				margin-top: 5px;
				margin-left: 79rpx;
				font-size: 23rpx;
				color: #666666;
			}
		}
		.order-detail__top {
			padding: 30rpx;
			padding-bottom: 24rpx;
			background: #fff;
			
			.order-detail__top--info {
				height: 42rpx;
				justify-content: space-between;
				align-items: center;
				padding-left: 50rpx;
				
				.name,.phone {
					font-size: 30rpx;
					font-weight: bold;
				}
				.phone {
					margin-left: 30rpx;
				}
			}
			.order-detail__top--address {
				position: relative;
				margin-top: 14rpx;
				color: #575757;
				.sprite {
					position: absolute;
					top: 4rpx;
					left: 0;
				}
				.address__text {
					width: calc(100% - 80rpx);
					line-height: 40rpx;
					padding-left: 5rpx;
				}
			}
			.sprite {
				display: block;
			}
		}
		.order-detail__product {
			margin-top: 16rpx;
			margin-bottom: 16rpx;
			background: #fff;
			.order-detail__shop-name {
				font-size: 30rpx;
				font-weight: bold;
				padding: 20rpx 0 0 30rpx;
			}
			ul {
				padding: 0;
				width: 100%;
			}
			
			li {
				border-bottom: 1px solid #EBEBEB;
				.list-item-content {
					width: calc(100% - 60rpx);
					margin: 20rpx 30rpx;
				}
				
				&:last-child {
					border-bottom: none;
				}
			}
			
			.order-detail__product--img {
				width: 180rpx;
				height: 180rpx;
				background: pink;
			}
			.order-detail__product--img image {
				width: 100%;
				height: 100%;
			}
			.order-detail__product--info {
				position: relative;
				margin-left: 14rpx;
				flex: 1;
				
				.title {
					display: block;
					line-height: 40rpx;
				}
				
				.text__info {
					margin-top: 10rpx;
					font-size: 24rpx;
					line-height: 33rpx;
					color: #666666;
				}
				.order-detail__product--price {
					position: absolute;
					bottom: 0;
					left: 0;
					height: 48rpx;
					width: 100%;
					align-items: center;
					justify-content: space-between;
					
					.price {
						font-size: 34rpx;
						font-weight: bold;
						color: #FD5052;
						
						.rmb {
							font-size: 25rpx;
							font-weight: normal;
						}
					}
				}
			}
		}
		.order-detail__total {
			padding: 30rpx;
			margin-top: 16rpx;
			background: #fff;
			.flex {
				height: 40rpx;
				justify-content: space-between;
				align-items: center;
			}
			
			.label {
				color: #666;
			}
			.total {
				margin-bottom: 38rpx;
			}
			.freight {
				margin-bottom: 30rpx;
			}
			.val {
				font-size: 34rpx;
				font-weight: bold;
				color: #FD5052;
				
				.symbol {
					font-style: normal;
					font-size: 24rpx;
					font-weight: normal;
				}
			}
			
			&.payment {
				justify-content: flex-end;
				
				.label {
					color: #222;
				}
			}
		}
		.order-detail__order {
			margin-top: 16rpx;
			padding: 30rpx;
			background: #fff;
			.flex {
				height: 40rpx;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 32rpx;
				font-size: 28rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
			}
			.label {
				color: #666;
			}
		}
		.order-detail--bottom {
			width: 100%;
			height: calc(110rpx + env(safe-area-inset-bottom));
			position: fixed;
			left: 0;
			bottom: 0;
			background: #fff;
			box-sizing: border-box;
			
			.order-detail--btns {
				display: flex;
				justify-content: flex-end;
				padding-top: 20rpx;
				padding-right: 30rpx;
				.btn {					
					height: 40rpx;
					line-height: 40rpx;
					padding: 10rpx 20rpx;
					background: #FFFFFF;
					border-radius: 30rpx;
					font-size: 28rpx;
					margin-left: 15rpx;
				}
				.border-999 {
					color: #272727;
					border: 1rpx solid #999999;
				}
				.border-C38A8A {
					color: red;
					border: 1rpx solid red;
				}
			}
		}
	}
</style>
